<template>
  <highcharts :options="options" class="chart" ref="highchart"></highcharts>
</template>
<script>
  import { colorConfigArr } from '@/utils/reportUtils'
  export default {
    name: 'monitorPie',
    data () {
      return {
        options: {
          chart: {
            type: 'pie',
            style: {overflow: 'visible', width: '100%'},
            animation: false
          },
          credits: {enabled: false},
          tooltip: {
            enabled: false
          },
          plotOptions: {
            pie: {
              allowPointSelect: false,
              cursor: 'pointer',
              dataLabels: {
                enabled: true,
                format: '<b>{point.name}</b>: {point.y}',
                color: '#4e4e4e'
              },
              showInLegend: true
            },
            series: {animation: false}
          },
          legend: {
            enabled: false,
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'bottom',
            symbolRadius: 5,
            symbolHeight: 10,
            symbolWidth: 10,
            x: -20,
            y: 0,
            borderWidth: 0,
            width: 140,
            itemStyle: {borderRadius: '50%', fontWeight: '100'},
            floating: false,
            useHTML: true
          },
          title: {
            text: ''
          },
          colors: colorConfigArr,
          series: [{
            type: 'pie',
            data: []
          }]
        }
      }
    },
    props: {
      data: {
        type: Array,
        default: function () {
          return {
            data: []
          }
        }
      },
      chartStyle: {
        type: Object,
        default: function () {}
      }
    },
    components: {
    },
    watch: {
      data () {
        this.options.series[0].data = this.data
      },
      '$store.state.navMenuState' () {
        if (this.$refs.highchart) {
          this.$refs.highchart.chart.reflow()
        }
      }
    },
    computed: {
    },
    methods: {
    },
    beforeMount () {
      this.options.series[0].data = this.data
    }
  }
</script>
<style lang="stylus" scoped>
  .chart
    max-width: 510px
    margin 0 auto
</style>
